<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="/hr/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="/hr/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.7.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/hr/js/bootstrap.min.js" charset="UTF-8"></script>

<style type="text/css">
/* UI Object */
#wrap{width:100%}
#header{width:100%}
#container{*display:inline-block;_float:left;_width /**/:100%;padding-right:200px}
#container:after{display:block;clear:both;content:''}
#content{float:left;width:100%;margin-right:-200px}
.aside{float:right;position:relative;left:200px;width:180px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{_float:left;position:relative;width:auto;margin:0;padding:10px;background:#f7f7f7}
#wrap{border:1px solid #bdbdbd}
#header{width:auto;margin-top:10px;padding:10px}
#header,#container{border:2px solid #bfbfbf;background:#e5e5e5}
#container{position:relative;padding-left:10px}
#content{position:relative;height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{left:190px;width:170px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{clear:both;width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* //UI Object */

body {
 width: 1024px;
 margin: 20px auto;
 font-family: Arial, 돋움;
}
	

@media screen and (max-width: 1024px){
	body {
	 width: auto;
	 margin: 20px auto;
	 font-family: Arial, 돋움;
	}
}

@media screen and (max-width: 500px){
	#container{*display:inline-block;_float:left;_width /**/:100%;padding-right:10px}
	#content{display:block;clear:both;position:relative;height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
	.aside{left:0px;float:left;clear:both;width:100%;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}

}
</style>
</head>
<body>

<!-- UI Object -->
<div id="wrap">
	<p>#wrap</p>
	<!-- header -->
	<div id="header">
		<p>#header</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<p>#container</p>
		<!-- content -->
		<div id="content">
			<p>#content</p>
		</div>
		<!-- //content -->
		<!-- aside -->
		<div class="aside">
			<p>.aside</p>
		</div>
		<!-- //aside -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<p>#footer</p>
	</div>
	<!-- //footer -->
</div>
<!-- //UI Object -->

</body>
</html>
